@extends('layouts.base')

@section('content')
        @foreach($weibos as $w)
            <div class="row">
                <div class="well">
                    <div class="row">
                        <div class="col-xs-3">
                            <img src="{{$w->avatar}}" alt="{{$w->weibor}}">
                        </div>
                        <div class="col-xs-9">
                            <p>{{$w->body}}</p>
                        </div>
                    </div>
                    <hr>
                    <div class="row">
                        <div id="blueimp-gallery" class="blueimp-gallery" data-use-bootstrap-modal="false">
                            <!-- The container for the modal slides -->
                            <div class="slides"></div>
                            <!-- Controls for the borderless lightbox -->
                            <h3 class="title"></h3>
                            <a class="prev">‹</a>
                            <a class="next">›</a>
                            <a class="close">×</a>
                            <a class="play-pause"></a>
                            <ol class="indicator"></ol>
                            <!-- The modal dialog, which will be used to wrap the lightbox content -->
                            <div class="modal fade">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" aria-hidden="true">&times;</button>
                                            <h4 class="modal-title"></h4>
                                        </div>
                                        <div class="modal-body next"></div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default pull-left prev">
                                                <i class="glyphicon glyphicon-chevron-left"></i>
                                                Previous
                                            </button>
                                            <button type="button" class="btn btn-primary next">
                                                Next
                                                <i class="glyphicon glyphicon-chevron-right"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div id="links">
                            @foreach($w->image_urls as $image)
                                <a href="{{$image->pic}}" title="{{$w->body}}" data-gallery>
                                    <img src="{{$image->pic}}" alt="{{$w->body}}" class="img-responsive">
                                </a>
                                <br>
                                <hr>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>

        @endforeach
        {!! $weibos->render() !!}
@endsection
